class Paging {
		constructor(uls) {
			this.index = 0;
			// this.oLis = lis;
			this.oUl = uls;
			this.oLis = [];
			this.arr = [];
			this.connet = 1;
			this.moveScroll();
			this.num = this.connet*3;
		}
		//获取数据
		getData() {
			let that = this;
			let xhr = new XMLHttpRequest();
			xhr.open("get", "json/main.json", true);
			xhr.send();
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4 && xhr.status == 200) {
					that.load(xhr.responseText);
				}
			}
		}
		load(resText) {
			this.arr = JSON.parse(resText);
			// console.log(this.arr);
			this.setBgc();
			
		}
		// 渲染页面
		setBgc() {
			let oLi = document.getElementsByClassName("img_main");
			this.oLis = oLi;
			for (let i = this.index; i < this.num; i++) {
				this.oUl.innerHTML += `
				<li id="${this.arr[i].id}" class="img_main">
				<div class="img_box">
					<a>
						<img src="${this.arr[i].img}">
						<span></span>
						<div class="commit">
					<button type="button">加入购物</button>
						<p>海外直采 海外价格 闪电发货</p>
						</div>
					</a>
				</div>
				<div class="img_text">
					<p>${this.arr[i].title}</p>
					<div class="price_box">
						<em>￥</em>
						<span>${this.arr[i].Money}</span>
					</div>
				</div>
			</li>`
			}
			
			this.connet++;
			this.num = this.connet*3;
		
			if(this.connet==this.arr.length%3){
				this.index=connet*3;
				this.num = this.arr.length;
				
			}
			if(this.index<this.arr.length){
				this.index += 3;
			}
			this.click();
		}
		click(){
			let oLi = document.getElementsByClassName("img_main");
			if(!window.localStorage){
			    alert("浏览器不支持localstorage");
			}else{
			    var storage=window.localStorage;
			    //写入a字段
			}
			for(let i=0;i<oLi.length;i++){
				oLi[i].onclick = function(){
				storage["id"]=this.id;
				location.href = "Goods.html";
				}
			}
		}
		moveScroll() {
			let top = 0;
			let imgtop = 0;
			let that = this;
			let maxtop = 0;
			let oLi = document.getElementsByClassName("img_main");
			this.oLis = oLi;
			window.onscroll = function() {
				maxtop = document.documentElement.scrollTop + document.documentElement.clientHeight;
				top = document.body.scrollTop || document.documentElement.scrollTop;
				imgtop = that.oLis[that.index-1].offsetTop;
				if (imgtop < maxtop) {
					if(that.index<that.arr.length){
						that.setBgc();
					}
				}
			}
		}
		}		
		let oUl = document.getElementById("main_img");
		let p = new Paging(oUl);
		p.getData();
		
		